<template>
  <Layout class="articalManager">
    <div>
      <Form ref="form1" :model="form1" :label-width="120">
        <Row class="query-form" style="padding-top: 15px">
          <Col span="8">
            <FormItem label="标题：">
              <Input class="query-form-el" type="text" v-model="form1.title"></Input>
            </FormItem>
          </Col>
          <!-- <Col span="7">
               <FormItem label="类型：">
                   <Select v-model="form1.type" >
                       <Option v-for="item in typeList" :value="item.value" >{{ item.name }}</Option>
                   </Select>
               </FormItem>
           </Col>-->
          <Col span="8" offset="8">
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
        </Row>
        <Row class="query-form">
          <Col span="24">
            <Button size="large" type="success" class="ivu-btn-add" icon="md-add" @click="addArtical()">新增
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
    <!-- 响应结果内容展示 -->
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" :loading="buttonLoading"
           stripe border :columns="columns1" :data="resultData">
    </Table>
    <!-- 底部分页条 -->
    <Page :total="dataCount" :page-size="pageSize"
          :page-size-opts="pageSizeArray" @on-change="pageChange"
          @on-page-size-change="pageSizeChange" show-total show-sizer/>

    <!--弹出窗  @on-cancel="cancel":当点击取消触发的函数-->

    <Modal title="通知公告" :transfer=false v-model="model1" :width=700>
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" label-position="top">
        <Row type="flex" justify="space-around" class="code-row-bg">
          <Col span="23">
            <FormItem label="标题" prop="title">
              <Input type="text" v-model="formCustom.title"></Input>
            </FormItem>
          </Col>

        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg">

          <Col span="11">
            <FormItem label="类型" prop="noticeType">
              <Select v-model="formCustom.noticeType">
                <Option value="1">培训</Option>
                <Option value="2">会议</Option>
                <Option value="3">其它</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="回执截止日期">
              <Date-picker :disabled="noticeTypeDisabled"

                           @on-clear="clearNoticeType"
                           type="date" v-model="formCustom.receiptDate" placeholder="选择日期"
                           style="width: 100%"></Date-picker>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg">
          <Col span="11">
            <FormItem label="是否置顶" prop="ifTop">
              <Select v-model="formCustom.ifTop">
                <Option :value="1">置顶</Option>
                <Option :value="0">不置顶</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="通知分类" prop="noticeClassify">
              <Select v-model="formCustom.noticeClassify">
                <Option :value="'1'">安全</Option>
                <Option :value="'0'">环保</Option>
              </Select>
            </FormItem>
          </Col>

        </Row>
        <Row type="flex" justify="space-around" class="code-row-bg" v-if="formCustom.ifTop==1">
          <Col span="11" v-show="formCustom.ifTop==1">
            <FormItem label="置顶级别" prop="title">
              <InputNumber type="text" :min="0" :max="1000" style="width: 100%" placeholder="数字越大排序越靠前"
                           v-model="formCustom.topNumber"></InputNumber>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="置顶到期时间：" prop="expireDate">
              <Date-picker :options="options" type="date" v-model="formCustom.expireDate" placeholder="选择日期"
                           style="width: 100%"></Date-picker>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg">
          <Col span="23">
            <FormItem label="通知公告文件上传：" prop="uploadList">
              <div>
                <Upload ref="upload"
                        :before-upload="beforeUpload"
                        :show-upload-list="true"
                        :max-size="10240"
                        multiple
                        type="drag"
                        accept="application/pdf"
                        :format="['pdf']"
                        :action="fileUrl">
                  <div style="padding: 10px">
                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                    <p>点击将文件拖拽到这里上传</p>
                    <span style="font-size:8px;color: #797a64">支持扩展名：.pdf</span>
                  </div>
                </Upload>
              </div>
              <div v-show="uploadBeforeList.length>0" v-for="(item,index) in uploadBeforeList" :key='item'>
                <a>{{ item.name }}</a>
                <Button type="text" icon="md-trash" @click="uploadBeforeList.splice(index, 1)"
                        style="margin-left: 5px;margin-bottom: 3px"/>
              </div>
              <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                <a @click="downloadFile(formCustom.proposalId,item)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash" @click="remove1(item.id)"
                        style="margin-left: 5px;margin-bottom: 3px"/>
              </div>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg">
          <Col span="23">
            <FormItem label="附件：" prop="uploadList">
              <div>
                <Upload ref="upload2"
                        :before-upload="beforeUpload2"
                        :show-upload-list="true"
                        :max-size="10240"
                        multiple
                        type="drag"
                        name="files"
                        :action="fileUrl2">
                  <div style="padding: 10px">
                    <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                    <p>点击将文件拖拽到这里上传</p>
                  </div>
                </Upload>
              </div>
              <div v-show="uploadBeforeList2.length>0" v-for="(item,index) in uploadBeforeList2" :key='item'>
                <a>{{ item.name }}</a>
                <Button type="text" icon="md-trash" @click="uploadBeforeList2.splice(index, 1)"
                        style="margin-left: 5px;margin-bottom: 3px"/>
              </div>
              <div v-show="uploadList2.length>0" v-for="item in uploadList2" :key='item'>
                <a @click="downloadFile(formCustom.proposalId,item)">{{ item.fileName }}</a>
                <Button type="text" icon="md-trash" @click="remove1(item.id)"
                        style="margin-left: 5px;margin-bottom: 3px"/>
              </div>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-save' @click="submit('formCustom')">确定</Button>
        <Button type="text" class='ivu-btn-cancel' @click="modalcancel">取消</Button>
      </div>
    </Modal>

    <Modal class="modal-view-detail" title="通知公告详情" :transfer=false v-model="model2" :width=700>
      <Row>
        <Col span="24">
          <Form ref="showdata" :label-width="110">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="标题：" prop="title">
                  {{ formCustom.title }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">

              <Col span="11">
                <FormItem label="发布处室：" prop="browse">
                  {{ formCustom.orgName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="通知分类：">
                  {{ formCustom.noticeClassify == '1' ? '安全' : formCustom.noticeClassify == '0' ? '环保' : ' ' }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="通知类型：">
                  {{ formCustom.noticeType === '1' ? '培训' : formCustom.noticeType === '2' ? '会议' : '其它' }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="回执截止日期：">
                  {{
                    this.formCustom.receiptDate ? this.formatDate(new Date(formCustom.receiptDate), 'yyyy-MM-dd') : ''
                  }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="发布人：" prop="userName">
                  {{ formCustom.userName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="发布时间：" prop="infoTitle">
                  {{ formCustom.updateDate }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="是否置顶：">
                  {{ formCustom.ifTop == 1 ? '置顶' : '不置顶' }}
                </FormItem>
              </Col>
              <Col span="11" v-show="formCustom.ifTop==1">
                <FormItem label="置顶级别：">
                  {{ formCustom.topNumber }}
                  <!--<InputNumber type="text" :min="0" :max="1000" style="width: 100%" placeholder="数字越大排序越靠前" v-model="formCustom.topNumber"></InputNumber>-->
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="通知公告文件：">
                  <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                    <a @click="downloadFile(formCustom.proposalId,item)">{{ item.fileName }}</a>
                  </div>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="附件：">
                  <div v-show="uploadList2.length>0" v-for="item in uploadList2" :key='item'>
                    <a @click="downloadFile(formCustom.proposalId,item)">{{ item.fileName }}</a>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
      </div>
    </Modal>


  </layout>

</template>

<script>
import {Api} from "../../../api/index.js"
import {sessionStorage} from '../../../common/cacheUtils.js';

export default {
  data() {
    return {
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),
      uploadList: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() < new Date();
        }
      },
      receiptDateOption: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000// 不能选今天之前的日期
        },
      },
      uploadList2: [],
      fileUrl: Api.interestedPartiesUserFile,
      fileUrl2: Api.uploadPTWFiles,
      buttonLoading: false,
      add: false,
      form1: {},
      formCustom: {},
      ruleCustom: {

        topNumber: [{
          validator: (rule, value, callback) => {
            if (this.formCustom.ifTop == 1 && (value == null || value == '' || value == undefined)) {
              this.$Message.error("置顶级别不能为空")
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blue'
        }],
        noticeType: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        title: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              this.$Message.error("通知公告标题不能为空")
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blue'
        }],
        uploadList: [{
          validator: (rule, value, callback) => {
            if (this.uploadBeforeList.length > 0 || this.uploadList.length > 0) {
              callback()
            } else {
              this.$Message.error("通知公告文件不能为空")
              callback(' ')
            }
          },
          required: true,
          trigger: 'change'
        }],
        noticeClassify: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              this.$Message.error("通知公告分类不能为空")
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blue'
        }]
      },
      resultData: [],
      showdata: {},
      tableHeight: 450,
      pageSizeArray: [5, 10, 20, 50],
      dataCount: 0,
      pageSize: 10,
      currentPage: 1,
      columns1: [{
        title: "序号",
        width: 80,
        align: "center",
        render: (h, params) => {
          return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
        }
      },
        {
          title: '标题',
          align: 'center',
          minWidth: 300,
          key: 'title'
        },
        {
          title: '浏览量',
          align: 'center',
          minWidth: 100,
          key: 'browse'
        },
        {
          title: '发布处室',
          align: 'center',
          minWidth: 300,
          key: 'orgName'
        },
        {
          title: '发布人',
          align: 'center',
          minWidth: 120,
          key: 'userName'
        },
        {
          title: '通知类型',
          align: 'center',
          minWidth: 100,
          key: 'noticeType',
          render: (h, params) => {
            return h('span', params.row.noticeType === '1' ? '培训' : params.row.noticeType === '2' ? '会议' : '其它');
          }
        },
        {
          title: '发布时间',
          align: 'center',
          minWidth: 120,
          key: 'updateDate',
          render: (h, params) => {
            return h('span', (this.formatDate(new Date(params.row.updateDate), 'yyyy-MM-dd')));
          }
        },
        {
          title: '操作',
          align: 'center',
          key: 'view',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            let flag = (this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId ||
                ((this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined &&
                    params.row.orgCode && params.row.orgCode.indexOf(this.currentUser.companyCode) != -1)
                    || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined))
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    this.showData(params, 1);
                  }
                }
              }, '详情'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                  color: flag ? '' : '#c5c8ce',
                  pointerEvents: flag ? '' : 'none'
                },
                on: {
                  click: () => {
                    this.showData(params, 2);
                  }
                }
              }, '修改'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                  color: flag ? 'red' : '#c5c8ce',
                  pointerEvents: flag ? '' : 'none'
                },
                on: {
                  click: () => {
                    this.deleteData(params);
                  }
                }
              }, '删除'),
            ]);
          }
        }
      ],
      model1: false,
      model2: false,
      infoId: "",
      uploadBeforeList: [],
      uploadBeforeList2: [],
      picture: '',
      fileName: null,
      downloadUrl: Api.downloadMongoFile
    }
  },
  computed: {
    noticeTypeDisabled() {
      let noticeType = this.formCustom.noticeType
      if (noticeType === '1') {
        return false;
      } else if (noticeType === '2') {
        return false;
      } else {
        this.$set(this.formCustom, 'receiptDate', null)
        return true;
      }
    }
  },
  watch: {
    'model1': function (qw, er) {
      if (!qw) {
        this.uploadList2 = [];
        this.uploadList = [];
        this.formCustom = {};
      }
    },
    'model2': function (qw, er) {
      if (!qw) {
        this.uploadList2 = [];
        this.uploadList = [];
        this.formCustom = {};
      }
    },
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - 325;
    this.query();
  },
  methods: {
    query() {
      this.buttonLoading = true
      let data = {
        startPage: this.currentPage,
        size: this.pageSize,
        type: 1,
        publishOrgId: sessionStorage('userId').getObject('userId').companyId
      };

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

      let url = Api.queryAppProposal;
      this.$http.get(url, {params: data}).then((res) => {
        if (res.data.status == '200') {
          this.resultData = res.data.data.data;
          this.dataCount = res.data.data.totalSize;
        } else {
          this.$Message.error("数据获取失败")
        }
        this.buttonLoading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    clearNoticeType() {
      this.$set(this.formCustom, 'receiptDate', null);
    },
    modalcancel() {
      this.model1 = false;
      this.formCustom = {};
      this.uploadBeforeList = []
    },
    getFiles() {
      let url = this.fileUrl + '/' + this.formCustom.proposalId + '/files/notice'
      this.$http.get(url).then((res) => {
        if (res.data.result == "success") {
          this.uploadList = res.data.data
        }
      })
    },
    getFiles2() {
      this.$http.get(Api.uploadPTWFiles + '/' + this.formCustom.proposalId + '/files/all', {
        params: {},
      }).then((res) => {
        this.uploadList2 = res.data.data
      })
    },
    beforeUpload(file) {
      if (this.uploadList.length > 0) {
        this.$Message.error("通知公告只能上传一个文档，请先删除原有的再重新上传")
        return false
      }
      if (file.name.toLowerCase().indexOf('.doc') > 0 || file.name.toLowerCase().indexOf('.pdf') > 0) {
        this.uploadBeforeList = []
        this.file = file
        this.uploadBeforeList.push(file)
        return false
      } else {
        this.$Message.error("仅支持上传word、pdf,请重新选择文件")
        return false
      }

      /* let formData = new FormData();
       formData.append("files", file); // 文件对象
       let url = this.fileUrl + '/' + this.formCustom.proposalId + '/files/notice'
       this.$http.post(url, formData).then((res) => {
           if (res.data.result == "success") {
               this.$Message.info("文件上传成功")
               this.getFiles();
           }
       })*/
    },
    beforeUpload2(file) {
      this.uploadBeforeList2.push(file);
      return false;
    },
    downloadFile(guideId, file) {
      let url = this.fileUrl + '/file/' + file.id;
      this.$http.get(url, {
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {

        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = file.fileName //标题
        aLink.click()
        document.body.appendChild(aLink)
      })
    },
    getFiles1() {
      let url = this.fileUrl + '/' + this.formCustom.proposalId + 'Pdf/files/notice'
      this.$http.get(url).then((res) => {
        if (res.data.result == "success") {
          for (let i in res.data.data) {
            this.remove1(res.data.data[i].id)
          }
        }
      })
    },
    remove1(id) {
      let url = this.fileUrl + '/file/' + id;
      this.$http.delete(url).then((res) => {
        this.getFiles()
        this.getFiles1()
      })
    },
    fileSub() {
      let formData = new FormData();
      formData.append("file", this.uploadBeforeList[0]); // 文件对象
      formData.append("id", this.formCustom.proposalId)
      formData.append("ip", this.fileUrl)
      // let url = this.fileUrl + '/' + this.formCustom.proposalId + '/files/notice'
      let url = Api.saveAppProposal + '/upload/mongo'
      this.$http.post(url, formData).then((res) => {
        this.uploadBeforeList = []
      })
    },
    submit() {
      this.$refs['formCustom'].validate((valid) => {
        if (valid) {
          let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
          let userId = sessionStorage('userId').getObject('userId').userId;
          let companyId = sessionStorage('userId').getObject('userId').companyId;
          let twoLevelOrgId = sessionStorage('userId').getObject('userId').twoLevelOrgId;
          if (this.uploadBeforeList.length > 0) {
            this.fileSub()
          }
          if (this.formCustom.ifTop == 0) {
            this.formCustom.topNumber = null
          }
          this.uploadBeforeList2.map((i) => {
            this.$refs.upload2.post(i);
          })
          if (this.add) {
            this.formCustom.createUserId = userId;
            this.formCustom.createOrgId = orgId;
            if (companyId != '18000000' && twoLevelOrgId != null)
              this.formCustom.publishOrgId = twoLevelOrgId;
            else
              this.formCustom.publishOrgId = '18000000';
            this.$http.post(Api.saveAppProposal, this.formCustom).then((res) => {
              this.$Message.success("保存成功")
              this.model1 = false;
              this.query();
            }).catch(e => {
              this.model1 = false;
              this.query();
              this.$Message.error("数据获取失败")
            })
          } else {
            this.formCustom.updateUserId = userId;
            this.formCustom.updateOrgId = orgId;
            this.$http.post(Api.updateAppProposal, this.formCustom).then((res) => {
              this.$Message.success("保存成功")
              this.model1 = false;
              this.query();
            }).catch(e => {
              this.model1 = false;
              this.query();
              this.$Message.error("数据获取失败")
            })
          }

        } else {
          // this.$Message.error('请填报完整!');
        }
      })
    },
    addArtical() {
      this.uploadList = [];
      this.uploadList2 = [];

      this.add = true;
      this.model1 = true;
      this.uploadBeforeList = []
      this.uploadBeforeList2 = []
      let dateTime = new Date();
      dateTime = dateTime.setDate(dateTime.getDate() + 30);
      dateTime = new Date(dateTime);
      this.formCustom = {
        ifTop: 1,
        topNumber: 1,
        expireDate: dateTime,
        type: 1,
        proposalId: this.get_uuid(),
      }

      this.fileUrl2 += '/' + this.formCustom.proposalId + '/files/all/download';
    },
    get_uuid() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";

      let uuid = s.join("");
      let reg = new RegExp("-", "g");
      let a = uuid.replace(reg, "");
      return a;
    },
    //重置输入框
    reset() {
      this.form1 = {};
    },
    pageChange(pageNum) {
      this.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.query();
    },
    showData(data, flag) {
      this.uploadBeforeList = []
      this.uploadList = []
      if (flag == 1) {
        this.formCustom = data.row;
        this.formCustom.createDate = this.formatDate(new Date(this.formCustom.createDate), 'yyyy-MM-dd');
        this.formCustom.updateDate = this.formatDate(new Date(this.formCustom.updateDate), 'yyyy-MM-dd');
        this.getFiles();
        this.getFiles2();
        this.model2 = true;
      } else {
        //修改页面
        this.add = false;
        this.formCustom = JSON.parse(JSON.stringify(data.row));
        this.getFiles();
        this.getFiles2();
        this.formCustom.createDate = this.formatDate(new Date(this.formCustom.createDate), 'yyyy-MM-dd');
        this.formCustom.updateDate = this.formatDate(new Date(this.formCustom.updateDate), 'yyyy-MM-dd');
        if (this.formCustom.receiptDate) {
          this.formCustom.receiptDate = this.formatDate(new Date(this.formCustom.receiptDate), 'yyyy-MM-dd');
        }

        this.fileUrl2 += '/' + this.formCustom.proposalId + '/files/all/download';
        this.model1 = true;
      }
    },
    deleteData(params) {
      let istrue = confirm("是否确定删除?");
      if (istrue) {
        this.$http.delete(Api.deleteAppProposal + '/' + params.row.proposalId).then((res) => {
          if (res.data.status == 200) {
            this.$Message.info('删除成功');
            this.query();
          } else {
            this.$Message.info('删除失败');
          }
        }).catch(e => {
          this.$Message.error("修改失败");
        });
      }
    },

    formatDate(date, fmt) {
      if (!date) return '';
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  }
}
</script>

<style lang='css' scoped>
@import '../../../index.css';
</style>
